<template>
  <div v-drag>
    <div class="mask"  @click="closePopup(false)"></div>
    <div class="edit_box" v-loading="loading">
      <div class="box_head">
        <p>{{did?'修改':'新增'}}指令</p>
        <i  @click="closePopup(false)"></i>
      </div>
      <div class="box_body" >
        <div class="line" :class="{'error_border':tipNum===0}">
          <span class="lab"><i class="mark_icon">*</i>名称：</span>
          <div>
            <el-input type="text" placeholder="请输入名称"  v-model.trim="instructName"
                      @input="setTip('','')"></el-input>
          </div>
        </div>
        <div class="line" :class="{'error_border':tipNum===1}">
          <span class="lab"><i class="mark_icon">*</i>指令：</span>
          <div>
            <el-input type="text" placeholder="请输入指令"  v-model.trim="instructContent"
                      @input="setTip('','')"></el-input>
          </div>
        </div>
        <div class="line" :class="{'error_border':tipNum===2}">
          <span class="lab"><i class="mark_icon">*</i>编码：</span>
          <div>
            <el-input type="text" placeholder="请输入编码"  v-model.trim="code"
                      @input="setTip('','')"></el-input>
          </div>
        </div>
<!--        <div class="line">-->
<!--          <span class="lab">类型：</span>-->
<!--          <div></div>-->
<!--        </div>-->
        <div class="line">
          <span class="lab">当前状态：</span>
          <div>
            <el-radio-group v-model="proStatus">
              <el-radio :label="1">正常</el-radio>
              <el-radio :label="0">禁用</el-radio>
            </el-radio-group>
          </div>
        </div>
        <p class="error_line">{{infoTip}}</p>
      </div>
      <div class="box_foot">
        <span @click="closePopup(false)">取消</span>
        <span @click="confirmEdit">确定</span>
      </div>
    </div>
  </div>
</template>

<script>

import {addInstruct, getInstructDetail, updateInstruct} from "../../../api/instruct";

export default {
  props:['did'],
  data(){
    return {
      instructContent: '',
      instructName: '',
      code: '',
      typeId:'',
      typeOptions:[],
      proStatus: 1,
      infoTip: '',
      tipNum: '',
      loading:false
    }
  },
  mounted() {
    if (this.did){
      this.getDetail();
    }
  },
  methods:{
    getDetail(){
      this.loading = true;
      getInstructDetail(this.did).then(res => {
        if (res.success) {
          this.setData(res.data)
        }
        this.loading = false;
      }, (err) => {
        this.loading = false;
      });
    },

    setData(obj){
      this.instructName = obj.name?obj.name:'';
      this.instructContent = obj.instruct?obj.instruct:'';
      this.proStatus = obj.enable?obj.enable:0;
      this.code = obj.code?obj.code:'';
      this.typeId = obj.type ?obj.type:'';
    },

    // 确认编辑
    confirmEdit(){
      if (this.instructName === '') {
        this.setTip(0, '请输入指令名称！')
      } else if (this.instructContent === '') {
        this.setTip(1, '请输入指令！');
      } else if (this.code ==='') {
        this.setTip(2, '请输入编码！');
      } else {
        this.sendInfo();
      }
    },

    sendInfo(){
      let that = this;
      that.loading = true;
      let data = {
        code: that.code,
        enable: that.proStatus,
        instruct: that.instructContent,
        name:that.instructName
      }
      if (that.did) {
        data.id = that.did;
        updateInstruct(JSON.stringify(data)).then(response => {
          that.setResult(response.success);
        }).catch((e) => {
          that.loading = false;
        });
      } else {
        addInstruct(JSON.stringify(data)).then(response => {
          that.setResult(response.success);
        }).catch((e) => {
          that.loading = false;
        });
      }
    },

    setResult(finish){
      if (finish){
        this.closePopup(true);
        this.$message.success('操作成功！');
      }
      this.loading = false;
    },

    setTip(num,text){
      this.tipNum = num;
      this.infoTip = text
    },

    // 关闭
    closePopup(refresh){
      this.$emit('listenToChild', {refresh: refresh})
    }
  }
}
</script>

<style scoped>
.box_body {
  min-height: 300px;
}

</style>
